<template>
	<div class="news-detail">
		<div class="subtitle"><span>{{ $t('navbar.news') }}</span></div>
		<div class="news-title"><span class="title">{{article.news_title}}</span><span class="news-time">发布时间&#12288;&#12288;{{article.news_time}}</span></div>
		<!-- <p class="news-content">{{article.content}}</p> -->
		<div class="news-content" v-html="article.content"></div>
	</div>
</template>

<script>
	export default {
		name: 'news-detail',
    data() {
      return {
        article: {}
      }
    },
    mounted() {
      this.getArticle()
    },
		computed: {
			newsId: function(){
				return this.$route.params.newsId;
			},
		},
    methods: {
      getArticle() {
        let that = this;
        if (window.DEBUGGING) {
          return new Promise((resolve) => {
            resolve({
              news_title: '新闻仅仅是新闻',
              news_time: "2018-03-22 15:41", 
              news_id: 11502, 
              content: '以以前，品牌生产什么商品，消费者就买什么。品牌是主角，你爱买不买，以前，品牌生产什么商品，消费者就买什么。品牌是主角，你爱买不买，消费者能挑选的余地很有限。现在可不是，为什么你看现在产品订制化的趋势越来越明显？越来越多的品牌会让消费者参与到产品设计中，让消费者进来，大家一起来做？比如服装订制化，珠宝定制化，服务定制化……因为品牌需要跟消费者建立一个更深刻的情感联结，让消费者喜欢、偏爱它，从做推广，消费者还是不会选择你。他们会选择他们喜欢的品牌，那些是自己喜欢的风格的品牌。前，品牌生产什么商品，消费者就买什么。品牌是主角，你爱买不买，消费者能挑选的余地很有限。以以前，品牌生产什么商品，消费者就买什么。品牌是主角，你爱买不买，以前，品牌生产什么商品，消费者就买什么。品牌是主角，你爱买不买，消费者能挑选的余地很有限。现在可不是，为什么你看现在产品订制化的趋势越来越明显？越来越多的品牌会让消费者参与到产品设计中，让消费者进来，大家一起来做？比如服装订制化，珠宝定制化，服务定制化……因为品牌需要跟消费者建立一个更深刻的情感联结，让消费者喜欢、偏爱它，从做推广，消费者还是不会选择你。他们会选择他们喜欢的品牌，那些是自己喜欢的风格的品牌。前，品牌生产什么商品，消费者就买什么。品牌是主角，你爱买不买，消费者能挑选的余地很有限。现在可不是，为什么你看现在产品订制化的趋势越来越明显？越来越多的品牌会让消费者参与到产品设计中，让消费者进来，大家一起来做？比如服装订制化，珠宝定制化，服务定制化……因为品牌需要跟消费者建立一个更深刻的情感联结，让消费者喜欢、偏爱它，从而选择它。所以，整体环境对品牌来说，更难更严峻，竞争对手这么多，差异化如果做的不好，定位做的不好，就算花很多钱做推广，消费者还是不会选择你。他们会选择他们喜欢的品牌，那些是自己喜欢的风格的品牌。'
            })
          }).then((res) => {
            that.article = res;
          })
        }

        this.$axios.get('/pc.php/News/content', {
          params: {
            news_id: that.newsId
          }
        }).then((res) => {
          that.article = res.data;
        })
      }
    }
	}
</script>

<style lang="less">
	@import '~COMMON/common.less';

	.news-detail {
		.news-title {
			border-bottom: 1px solid #e5e5e5;
			text-align: right;
			height: 76px;
			.title {
				float: left;
				line-height: 76px;
				font-size: 30px;
				color: #333;
			}
			.news-time {
				display: inline-block;
				margin-top: 40px;
				font-size: 14px;
				color: #999;
			}
			.On-xs({
				height: 48px;
				.title {
					font-size: 18px;
					line-height: 48px;
				}
				.news-time {
					font-size: 12px;
					margin-top: 20px;
				}
			})
		}
		.news-content {
			margin-top: 20px;
			line-height: 30px;
			color: #666;
			.On-xs({
				font-size: 14px;
				line-height: 21px;
			})
		}
	}
</style>